window.onload = function() {
    // var myMp3=new Audio();
    // myMp3.src="mp3/MADILYN - Galway Girl.mp3"
    var myMp3 = document.getElementById('mymp3');
    var mv = document.getElementById('mv');
    var deo = document.getElementById('deo');
    var like = document.getElementById('like');
    // var bfBtn = document.getElementById('bf');
    // var ztBtn = document.getElementById('zt');
    var bfztBtn = document.getElementById('bfzt');
    // var tzBtn = document.getElementById('tz');
    var ktBtn = document.getElementById('kt');
    var kjBtn = document.getElementById('kj');
    var jyBtn = document.getElementById('jy');
    var zjBtn = document.getElementById('zjyl');
    var jxBtn = document.getElementById('jxyl');
    var timeShow = document.getElementById('time');
    var timeLong = document.getElementById('timelong');
    // var img = document.querySelector('img');
    var hong = document.getElementById('hong');
    var hui = document.getElementById('hui');
    var lan = document.getElementById('lan');
    var fmpic = document.getElementById('fmpic');
    var cover = document.getElementById('cover');
    var wavee = document.getElementsByClassName('wave');
    var mTitle = document.getElementById('musicTitle');
    var mSinger = document.getElementById('singer');
    var sys = document.getElementById('sys');
    var xys = document.getElementById('xys');
    var i = 0;

    var a = false;
    deo.onclick = function() {
        if (a == false) {
            mv.style.display = 'block';
            mv.play();
            myMp3.pause();
            bfztBtn.innerHTML = '';
            a = true;
        } else {
            mv.pause();
            mv.style.display = 'none';
            myMp3.play();
            bfztBtn.innerHTML = '';
            a = false;
        }


    }

    var musicList = [{
        'mTitle': '动感光波 - 《红色2021》 (Live)',
        'mSinger': '群星',
        'mAddress': 'mp3/1 (2).mp3',
        'mCover': 'img/1.jpg'
    }, {
        'mTitle': '无题',
        'mSinger': '姜云升',
        'mAddress': 'mp3/1 (1).mp3',
        'mCover': 'img/2.jpg'
    }, {
        'mTitle': 'Galway Girl',
        'mSinger': 'MADILYN',
        'mAddress': 'mp3/MADILYN - Galway Girl.mp3',
        'mCover': 'img/3.jpg'
    }]

    // 点击灰色进度条 可以控制音乐的进度
    hui.onclick = function(e) {
        myMp3.currentTime = e.offsetX / hui.offsetWidth * myMp3.duration;
    }

    // 点击红色进度条 可以控制音乐的进度
    hong.onclick = function(e) {
        myMp3.currentTime = (e.offsetX + parseInt(hong.style.left)) / hui.offsetWidth * myMp3.duration;
        e.stopPropagation();
    }

    // 拖动蓝色圆点
    lan.addEventListener('mousedown', function() {
        document.addEventListener('mousemove', move);

        function move(eve) {
            myMp3.currentTime = eve.offsetX / hui.offsetWidth * myMp3.duration;

        }
        document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move);
        })
    })

    sys.onclick = function() {
        i--;
        if (i < 0) {
            i = musicList.length - 1;
        }
        bf();
        like.innerHTML = ''
    }
    xys.onclick = function() {
            i++;
            if (i > musicList.length - 1) {
                i = 0;
            }
            bf();
            like.innerHTML = '';
        }
        // timeShow.innerHTML = '00:00/' + ;

    timeLong.innerHTML = fm1(myMp3.duration);

    function fm1(n) {
        var miu = Math.floor(n / 60);
        var sec = Math.floor(n % 60);
        return fm2(miu) + ':' + fm2(sec);
    }

    function fm2(n) {
        if (n <= 9) {
            return '0' + n;
        } else {
            return n;
        }
    }

    myMp3.ontimeupdate = function() {
        timeShow.innerHTML = fm1(myMp3.currentTime);
        hong.style.left = parseInt((myMp3.currentTime / myMp3.duration) * hong.offsetWidth - hong.offsetWidth) + 'px'
        lan.style.left = parseInt((myMp3.currentTime / myMp3.duration) * hong.offsetWidth - 10) + 'px'
    }
    myMp3.onended = function() {
            i++;
            if (i > musicList.length - 1) {
                i = 0;
            }
            bf();
        }
        // bfBtn.onclick = function() {
        //     bf();
        // }

    function bf() {
        musicTitle.innerHTML = musicList[i].mTitle;
        mSinger.innerHTML = musicList[i].mSinger;
        myMp3.src = musicList[i].mAddress;
        cover.src = musicList[i].mCover;
        myMp3.play();
    }
    // ztBtn.onclick = function() {
    //     myMp3.pause();
    // }
    bfztBtn.onclick = function() {
            if (myMp3.paused) {
                myMp3.play();
                // bf();
                bfztBtn.innerHTML = '';
            } else {
                myMp3.pause();
                bfztBtn.innerHTML = '';
            }
        }
        // tzBtn.onclick = function() {
        //     myMp3.pause();
        //     myMp3.currentTime = 0;
        // }
    ktBtn.onclick = function() {
        myMp3.currentTime -= 5;
    }
    kjBtn.onclick = function() {
        myMp3.currentTime += 5;
    }



    // 增加音量
    zjBtn.onclick = function() {
        if (myMp3.volume > 1) {
            // alert('d');
            myMp3.volume = 1;
            return;
        }
        myMp3.volume += 0.05;
        // console.log(myMp3.volume);
        /* jyBtn.innerHTML = myMp3.volume;
        jyBtn.innerHTML = parseInt(myMp3.volume * 10); */
        volu();
    }

    function volu() {
        var vol = (myMp3.volume * 10).toFixed(1);
        jyBtn.innerHTML = Number(vol) * 2 - 1;
        /* var pointIndex = String(vol).indexOf('.') + 1;
        var point = vol.charAt(pointIndex); */
        // console.log(point);
        /*  if (pointIndex == 0) {
             jyBtn.innerHTML = Number(vol) * 2 - 1;
         } else {
             jyBtn.innerHTML = Number(vol) * 2 - 1;
         } */
        if (jyBtn.innerHTML == 0) {
            jyBtn.innerHTML = '';
        }
        if (jyBtn.innerHTML == 19) {
            jyBtn.innerHTML = '';
            // zjBtn.style.color = 'grey';
        }
    }
    // 减小音量
    jxBtn.onclick = function() {
        if (myMp3.volume <= 0.05) {
            myMp3.volume = 0;
            return;
        }
        myMp3.volume -= 0.05;
        console.log(myMp3.volume);
        volu();

        // jyBtn.innerHTML = parseInt(myMp3.volume * 10);
        // jyBtn.innerHTML = (myMp3.volume * 10).toFixed(1);

    }

    var b = false;
    jyBtn.addEventListener('click', function() {
        myMp3.muted = !myMp3.muted;
        if (b == false) {
            jyBtn.innerHTML = '';
            b = true;
        } else {
            jyBtn.innerHTML = '';
            b = false;
        }


    })



    //动画控制
    myMp3.onplaying = function() {
        fmpic.style.animationPlayState = "running";
        for (var i = 0; i <= wavee.length; i++) {
            wavee[i].style.animationPlayState = "running";

        }

    }
    myMp3.onpause = function() {
        fmpic.style.animationPlayState = "paused";
        for (var i = 0; i <= wavee.length; i++) {
            wavee[i].style.animationPlayState = "paused";

        }


    }

    // 收藏列表
    var f = false;
    var tbody = document.getElementsByTagName("tbody")[0];
    var table = document.querySelector("table");
    var tuichu = document.getElementById('tuichu');
    var list = document.querySelector('.list');
    var num = document.getElementById('num');
    tuichu.onclick = function() {
        list.style.display = 'none';
    }
    like.onclick = function(event) {
            if (f == false) {
                list.style.display = 'block';
                like.innerHTML = '';
                var newTr = tbody.firstElementChild.cloneNode(true); //深度拷贝
                newTr.children[0].innerHTML = musicList[i].mTitle;
                newTr.className = Math.random();
                tbody.appendChild(newTr);
                f = true;
            } else {
                // var target = event.target;
                like.innerHTML = '';
                f = false;
                tbody.removeChild(tbody.firstElementChild);
                // tbody.removeChild(target.parentNode.parentNode);


            }
        }
        // num.innerHTML = '(' + tbody.ElementChild.length + '首)';
    num.innerHTML = '(' + table.cloneNode.length + '首)';


}